<template>
	<div class="whole">
		<div class="dia">
			<van-search v-model="agentName" placeholder="请输入代理商名称或者手机号" shape="round" :show-action="showAction"
				@search="onSearch" class="search">
			</van-search>
			<div class="" @click="onSearch">
				搜索
			</div>
		</div>
		<div class="wrapperCenter">
			<div class="content">
				<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList">
					<empty v-if="!list.length"></empty>
					<div class="dis" v-for="(item,index) in list" :key="index">
						<div class="main" :class="index!=0?'main_top':''">
							<div class="main_d">
								<div class=""
									style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
									<div class="dia"
										style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
										<div class="dia">
											<img src="@/assets/terminal/logo_img.png" alt="" />
											<div class="institution">
												{{item.agentName}}
											</div>
											<div class="condition">
												{{item.agentPhoneNo}}
											</div>
										</div>
										<div class="condition_a dis" @click="allot(item)">
											调拨
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</van-list>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		selectUnderAgentList,
		updateTerTran,
		updateTerTranRange,
		selectChannelUnderAgentList
	} from '@/api/terminal'
	import store from '@/store'
	import {
		showToast,
		showConfirmDialog
	} from 'vant'
	export default defineComponent({
		name: 'sateActive',
		setup() {
			const router = useRoute()
			const routers = useRouter()
			const state = reactive({
				agentName: "",
				showAction: false,
				terList: [],
				pageStart: 1,
				pageSize: 20,
				loading: false,
				finished: false,
				list: [],
				channelName: ""
			})
			console.log(router.query.type == 1)
			const onSearch = () => {
				state.list = []
				state.pageStart = 1
				getList()
				
			}
			//机具划拨
			const allot = (item) => {
				showConfirmDialog({
						message: `是否确认划拨给${item.agentName}`,
						confirmButtonColor: '#FF2828'
					})
					.then(() => {
						console.log('asd',router.query.type == 1)
						if (router.query.type == 1) {
							origination(item)
						} else {
							appropriate(item)
						}
					})
					.catch(() => {
						// on cancel
					})
			}
			//起始号划拨
			const origination = (item) => {
				updateTerTranRange({
					startSn: router.query.startSn,
					endSn: router.query.endSn,
					channelCode: router.query.channelCode,
					parentNo: store.state.user.agentNo,
					agentNo: item.agentNo
				}).then(res => {
					showToast(res.data)
					setTimeout(() => {
						routers.go(-1);
					}, 3000)
				})
			}
			//终端选择划拨
			const appropriate = (item) => {
				updateTerTran({
					terList: router.query.terList,
					channelCode: router.query.channelCode,
					parentNo: store.state.user.agentNo,
					agentNo: item.agentNo
				}).then(res => {
					showToast('划拨成功')
					setTimeout(() => {
						routers.go(-1);
					}, 2100)
				})
			}
			//获取数据
			const getList = () => {
				state.terList = router.query.terList
				let parames = {
					pageStart: state.pageStart,
					pageSize: state.pageSize,
					parentNo: store.state.user.agentNo,
					channelCode: router.query.channelCode,
				}
				if (state.agentName.length > 0) {
					parames.agentName = state.agentName
				}
				selectChannelUnderAgentList(parames).then(res => {
					if (res.data.records.length != 0) {
						if (res.data.records.length < 20) {
							state.finished = true
							state.loading = false
						} else {
							state.pageStart++
							state.finished = false
							state.loading = false
						}
						state.list = state.list.concat(res.data.records)
					} else {
						state.finished = true
						state.loading = false
					}

				})
			}
			return {
				...toRefs(state),
				getList,
				onSearch,
				allot,
				appropriate,
				origination
			}
		}
	})
</script>
<style scoped lang="scss">
	.whole {
		height: 100vh;
		background-color: #fff;
		overflow-y: auto;

		.search {
			width: 328px;
			// position: fixed;
			// top: 0;
		}

		.wrapperCenter {
			height: 100vh;
			overflow: scroll;

			.content {

				// padding: 0 10px;
				// padding-bottom:50px;
				// box-sizing: border-box;
				.main {
					width: 339px;
					height: 46px;
					background: #FFFFFF;
					box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
					border-radius: 6px;
					padding: 10px 10px;
					box-sizing: border-box;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 12px;
					color: #333333;
					margin-top: 12px;

					img {
						width: 23px;
						height: 23px;
						border-radius: 6px;
					}

					.main_d {
						// width: 280px;
						display: flex;
						justify-content: space-between;
					}

					.institution {
						width: 40px;
						margin-left: 12px;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.condition_a {
						width: 63px;
						height: 24px;
						background: #74A2FF;
						color: #fff;
						border-radius: 14px;
					}

					.condition {
						// margin-top: 4px;
						margin-left: 12px;
					}
				}
			}
		}

		// .wrapperBottom {
		// 	padding: 14px;
		// 	position: fixed;
		// 	width: 100%;
		// 	bottom: 0;
		// 	background: #ffffff;
		// 	opacity: 1;
		// 	border-radius: 0px;
		// 	display: flex;
		// 	justify-content: space-between;

		// 	.left {
		// 		display: flex;
		// 		align-items: center;
		// 	}

		// 	.right {
		// 		// width: 73px;
		// 		// height: 21px;
		// 		background: #2687FF;
		// 		border-radius: 14px;
		// 		padding: 6px 8px;
		// 		opacity: 1;
		// 		display: flex;
		// 		align-items: center;
		// 		justify-content: center;
		// 		font-size: 12px;
		// 		color: #ffffff;
		// 		// border-radius: 5px;
		// 	}
		// }
	}

	::v-deep .van-search__content {
		background-color: #EDF5FF !important;
	}
</style>